<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>webpush</title>
</head>
<body>
    <h3> 公钥：<%= publicKey %> </h3>
    <!-- -->
    <input type="hidden" value="<%= publicKey %> " id="publicKey">
    <div id="app">
      <div>       
          <el-tag :type="isSubscribed ? 'success' : 'info' ">状态：{{isSubscribed ? '已订阅': '未订阅'}}</el-tag>        
          <el-button v-if="isSubscribed" type="primary" @click="unsubscribe">取消订阅</el-button>
          <el-dialog
            title="push"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>是否订阅推送消息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="subscribePush">同意</el-button>
            </span>
          </el-dialog>
      </div>     
    </div>

</body>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="./public/push.js"></script>
</html>